<template>
	<view class="user_con">
		<view class="banner">
			<image src="/static/images/user/banner.png" style="width:100%;height:100%"></image>
			<view class="info">
				<view class="icon">
					<image src="/static/images/user/head.png" style="width:100%;height:100%"></image>
				</view>
				<view class="user_box">
					<view class="up">香薷1003</view>
					<view class="down">
						<image src="/static/images/user/userId.png" style="width:100%;height:100%"></image>
						<span>26</span>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="tabs">
				<view class="card" @click="docClick()">
					<view>我是医生</view>
				</view>
				<view class="card" @click="patClick()">
					<view>我是患者</view>
				</view>
			</view>
			<view class="box">
				<view class="title">我的工具栏</view>
				<view class="list" @click="tabClick(val)" v-for="(val,index) in toolsData" :key="index" :class="{borderNone:index === toolsData.length-1}">
					<view class="left">
						<view class="icon">
							<image :src="val.icon" style="width:100%;height:100%"></image>
						</view>
						<view class="text">{{val.name}}</view>
					</view>
					<u-icon v-if="index<toolsData.length-2" name="arrow-right" color="#999" size="22"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			toolsData:[
				{name:'用户档案',icon:'/static/images/user/hzda.png'},
				{name:'问诊记录',icon:'/static/images/user/kzjl.png'},
				{name:'我的预约',icon:'/static/images/user/dzjl.png'},
				{name:'测评报告',icon:'/static/images/user/xtsz.png'},
				{name:'系统设置',icon:'/static/images/user/xtsz.png'},
				{name:'关于我们',icon:'/static/images/user/gywm.png'},
				{name:'退出登录',icon:'/static/images/user/tcdl.png'},
			]
		}
	},
	onLoad() {},
	methods: {
		docClick(){
			uni.navigateTo({
				url:"/pages/tabbar/user/createDoc/index"
			})
		},
		patClick(){
			uni.navigateTo({
				url:"/pages/tabbar/user/createPatient/index"
			})
		},
		tabClick(val){
			console.log(val.name)
			if(val.name === '问诊记录'){
				uni.navigateTo({
					url:"/pages/tabbar/user/consultation"
				})
			}
			if(val.name === '我的预约'){
				uni.navigateTo({
					url:"/pages/tabbar/user/myAppointment"
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.user_con{
	width:100%;
	height:100%;
	position: absolute;
	background: #F8F8F8;
	font-family: PingFang SC, PingFang SC;

	.banner{
		width:100%;
		height:425rpx;
		position: relative;
		.info{
			position: absolute;
			top:100rpx;
			left:30rpx;
			display: flex;
			align-items: center;
			.icon{
				width:100rpx;
				height:100rpx;
			}
			.user_box{
				padding-left: 20rpx;
				.up{
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}
				.down{
					width:146rpx;
					height:50rpx;
					position: relative;
					span{
						position: absolute;
						left:60rpx;
						top:5rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FE6406;
					}
				}
			}
		}
	}
	.section{
			padding: 30rpx;
			position: absolute;
			top:274rpx;
			left: 0;
			width:100%;
			.tabs{
				margin-bottom: 26rpx;
				display: flex;
				gap: 20rpx;
				.card{
					flex: 1;
					height:160rpx;
					border-radius: 8rpx;
					background: #fff;
					position: relative;
					view{
						position: absolute;
						top:63rpx;
						left:43rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
				}
				.card:nth-child(1){
					background-image: url('/static/images/userLeft.png');
					background-size: cover;
					background-position: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.card:nth-child(2){
					background-image: url('/static/images/userRight.png');
					background-size: cover;
					background-position: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 25rpx;
			.title{
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 17rpx;
			}
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E4E4E4;
				.left{
					display: flex;
					align-items: center;
					.icon{
						width:40rpx;
						height:40rpx;
						margin-right: 30rpx;
					}
					.text{
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
			.borderNone{
				border:none;
			}
		}
	}
}
</style>
